<template>
  <div class="upload-container-icon">
    <el-upload multiple
               class="upload-demo"
               accept=".png,.jpg"
               :action="uploadImgUrl"
               list-type="text"
               :headers="headers"
               :on-remove="removeImage"
               :on-success="handleUploadSuccess"
               :before-upload="handleBeforeUpload"
               :on-error="handleUploadError"
               :on-exceed="handleExceed"
               :file-list="fileList"
               :show-file-list="false"
               :limit="1"
               drag>
      <div @click="removeImage" v-if="data.length > 0" class="file-image-pre">
        <div class="image-remove">
          <i class="el-icon-close"></i>
        </div>
        <img :src="data[0].url" class="avatar">
      </div>
      <div v-else class="file-list">
        <i><img src="@/assets/images/message/Slice 35@2x.png"
                class="img"
                alt=""></i>
        <div class="el-upload__tip"
             slot="tip"
             v-if="isShowTip">
          且不超过<b style="color: #f56c6c">{{ fileSize }}MB</b>
        </div>
      </div>
    </el-upload>

  </div>

</template>

<script>

import {getToken} from "@/utils/auth";

export default {
  props: {
    // 大小限制(MB)
    value: {},
    data: {
      type: Array,
      default: () => [],
    },
    fileSize: {
      type: Number,
      default: 1,
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileType: ["png", "jpg"],
      fileList: []
    };
  },
  watch: {
    data: {
      handler: function () {
        this.fileList = this.data
      }
    }
  },
  mounted() {
    var that = this;
    if (that.data) {
      that.fileList = that.data
    }
  },
  methods: {
    handleRemove(file, fileList) {
    },
    handleExceed(files, fileList) {
      this.$message.warning(`请先移除当前上传图片`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleUploadSuccess(res, file, fileList) {
      // JSON.parse(JSON.stringify(fileIdList))
      // this.fileIdList = fileList;
      var that = this
      var fileList = that.fileList;
      if (!fileList) {
        that.fileList = []
        fileList = that.fileList
      }

      fileList.push(file)
      this.fileList = fileList
      const fileArray = []
      fileList.forEach(item => {
        if (!item.id) {
          item.id = item.response.fileId
        }
        fileArray.push({name: item.response.fileName, url: item.response.url})
      })
      this.$emit("input", fileArray);
      this.loading.close();
    },
    removeImage(file, fileList, open) {
      if (open) {
        const arr = fileList.filter(item => {
          return item.id !== file.id
        })
        // this.$set(this,"fileIdList", arr)
        // this.fileList = arr
        this.$emit("input", arr);
      } else {
        this.$emit("input", fileList);
      }

    },
    handleBeforeUpload() {
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.loading.close();
    },
  }
}
</script>

<style lang="scss" scoped>
.upload-container-icon {
  ::v-deep.el-upload-dragger {
    width: 100px;
    height: 100px;
    background-color: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.custom-file {
  height: 40px;
  display: flex;
  padding: 0 10px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;

  > div {
    display: flex;
    align-items: center;
  }

  img {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    margin-right: 10px;
  }

  .el-icon-close {
    line-height: 30px;
  }
}

.img {
  width: 43px;
  height: 43px;
  margin-top: 15px;
  //margin-top: 43px;
}

.el-upload__text {
  display: flex;
  flex-direction: column;
  margin-top: -14px;

  span {
    font-size: 12px;
  }

  p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #0b9eae;
    height: 22px;
  }
}
.file-image-pre {
  height: 100%;
  width: 100%;
  position: relative;
  .image-remove {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 20px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.avatar {
  width: 100%;
  height: 100%;
}
</style>
